<template>
  <el-dialog
    :title="user.id ? '编辑用户' : '添加用户'"
    :visible.sync="dialogFormVisible"
    @close="handleDialogClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      label-width="80px"
      :model="user"
      :rules="rules"
      ref="addUserForm"
    >
      <el-form-item
        label="用户名"
        prop="username"
      >
        <el-input
          :disabled="!!user.id"
          v-model="user.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="!user.id"
        label="密码"
        prop="password"
      >
        <el-input
          v-model="user.password"
          autocomplete="off"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="邮箱"
        prop="email"
      >
        <el-input
          v-model="user.email"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="电话"
        prop="mobile"
      >
        <el-input
          v-model="user.mobile"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitForm"
        >确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
//验证邮箱的规则
var checkEmail = (rule, value, cb) => {
  const regEmail = /^\w+@\w+(\.\w+)+$/;
  if (regEmail.test(value)) {
    cb();
    return false;
  }
  //返回一个错误提示
  cb(new Error(rule.message));
};
//验证手机号码的规则
var checkMobile = (rule, value, cb) => {
  const regMobile = /^1[34578]\d{9}$/;
  if (regMobile.test(value)) {
    return cb();
  }
  //返回一个错误提示
  cb(new Error(rule.message));
};
export default {
  props: ["dialogVisible", "user"],
  data() {
    return {
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "长度应该是3~10位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "长度应该是6~12位",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: checkEmail,
            message: "邮箱格式不正确，请重新输入",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            validator: checkMobile,
            message: "手机号码不正确，请重新输入",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("close-dialog");
      },
    },
  },
  created() {
    console.log(this.user);
  },
  methods: {
    // 提交添加用户表单
    handleSubmitForm() {
      this.$refs.addUserForm.validate(async (valid) => {
        if (valid) {
          if (this.user.id) {
            // 编辑
            const { data: res } = await this.$http.put(
              `users/${this.user.id}`,
              {
                email: this.user.email,
                mobile: this.user.mobile,
              }
            );

            this.$message[res.meta.status === 200 ? "success" : "error"](
              res.meta.msg
            );
          } else {
            // 添加
            // console.log("表单校验成功");
            const { data: res } = await this.$http.post("users", this.user);
            // this.$message.success("成功"); // 方式1
            // this.$message["success"]("成功"); // 方式2，和方式1是一样的
            this.$message[res.meta.status === 201 ? "success" : "error"](
              res.meta.msg
            );
          }

          // 关闭对话框
          this.dialogFormVisible = false;
          // 刷新列表数据
          this.$emit("refresh");
        }
      });
    },
    // 添加用户对话框关闭时的回调函数
    handleDialogClose() {
      // 清空表单
      this.$refs.addUserForm.resetFields();
    },
  },
};
</script>

<style>
</style>